<template>
  <div class="quality-box">
    <div class="quality-content" flex="dir:top box:justify">
      <el-select class="w-100" v-model="equipmentValue" @change="chooseEquipment" placeholder="请选择">
        <el-option
                v-for="i in equipmentOptions"
                :key="i.id"
                :value="i.id"
                :label="i.label">
        </el-option>
      </el-select>
      <div id="main-quality"></div>
      <div>
        <div class="quality-legend">
          <div v-for="(item, i) in qualityList" :key="i">
            <span :style="{background: item.color}"></span>
            <i>{{ item.name}}</i>
            <b v-if="item.name === '风向'">{{windT(item.num)}}</b>
            <b v-else>{{item.num + item.unit}}</b>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'eQuality',
  data () {
    return {
      equipmentList: [],
      equipmentOptions: [], // 初始化select格式
      equipmentValue: '',
      qualityData: [0, 0, 0, 0, 0, 0], // 获取到的环保质量渲染echarts的数据
      qualityList: [
        { name: '温度', num: 0, unit: '°C', color: '#BAD87D' },
        { name: '湿度', num: 0, unit: '%RM', color: '#BD10E0' },
        { name: '风向', num: 0, unit: 'deg', color: '#F6511D' },
        { name: '风速', num: 0, unit: 'm/s', color: '#50E3C2' },
        { name: 'pm2.5', num: 0, unit: 'ug/m3', color: '#8B572A' },
        { name: 'pm10', num: 0, unit: 'ug/m3', color: '#4A90E2' }
      ], // 获取到的环保质量分类列表
      chart: ''
    }
  },
  props: {
    option: {
      type: Object,
      default () {
        return {
          legend: {
            bottom: 5,
            data: ['上海'],
            itemGap: 20,
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            selectedMode: 'single'
          },
          radar: {
            center: ['50%', '50%'], // 控制雷达图图例位置
            indicator: [
              { name: '温度', max: 80 },
              { name: '湿度', max: 100 },
              { name: '风向', max: 1000 },
              { name: '风速', max: 20 },
              { name: 'pm2.5', max: 150 },
              { name: 'pm10', max: 150 }
            ],
            radius: 50, // 控制雷达图图例大小
            splitNumber: 3,
            name: {
              textStyle: {
                color: '#9FACC3'
              }
            },
            splitLine: {
              lineStyle: {
                color: [
                  '#50E3C2'
                ].reverse()
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#50E3C2'
              }
            }
          },
          series: [
            {
              type: 'radar',
              lineStyle: {
                normal: {
                  width: 1,
                  opacity: 0.5
                }
              },
              data: [
                {
                  value: []
                }
              ],
              symbol: 'circle',
              symbolSize: 6,
              itemStyle: {
                normal: {
                  color: '#50E3C2'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.7,
                  backgroundColor: '#50E3C2'
                }
              }
            }

          ]
        }
      }
    }
  },
  mounted () {
    this.initData()
    // this.getChart()
  },
  methods: {
    // 初始化环保质量参数
    initData: function () {
      let _this = this
      let url = this.$base.getUrl('queryEquipmentTestingList')
      let params = {
        url: url,
        data: {
          // 'id': 303
        },
        noLoading: true
      }

      this.$store.dispatch('postForm', params).then((res) => {
        const { page } = res
        this.equipmentList = page.list
        const equipmentOptions = []
        page.list.map(item => {
          equipmentOptions.push({
            id: item.id,
            label: item.address
          })
        })
        // console.log(111,res,equipmentOptions)
        _this.equipmentOptions = equipmentOptions
        _this.equipmentValue = equipmentOptions[0].id
        _this.chooseEquipment(equipmentOptions[0].id)
      })
    },
    chooseEquipment: function (value) {
      const arr = this.equipmentList.filter(item => item.id === value)
      if (!arr.length) return
      const result = arr[0] || {}
      const { temperature, humidity, winddirection, windspeed, pm25, pm10, id } = result
      this.equipmentValue = id
      this.qualityData = [temperature, humidity, winddirection, windspeed, pm25, pm10]
      this.qualityList.map((item, index) => {
        item.num = this.qualityData[index]
      })
      this.getChart()
    },
    selectEquipment: function (val) {
      // console.log(val)
    },
    // 初始化图例
    getChart () {
      let temp = this.option
      temp.series[0].data[0].value = this.qualityData
      this.chart = this.$echarts.init(document.getElementById('main-quality'))
      this.chart.setOption(this.option)
    },
    windT (deg) {
      if ((deg >= 0 && deg <= 20) || (deg >= 340 && deg <= 360)) {
        return '北风'
      } else if (deg >= 21 && deg <= 69) {
        return '东北风'
      } else if (deg >= 70 && deg <= 110) {
        return '东风'
      } else if (deg >= 111 && deg <= 159) {
        return '东南风'
      } else if (deg >= 160 && deg <= 200) {
        return '南风'
      } else if (deg >= 201 && deg <= 249) {
        return '西南风'
      } else if (deg >= 250 && deg <= 290) {
        return '西风'
      } else if (deg >= 291 && deg <= 339) {
        return '西北风'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  .quality-box {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }

  .quality-content {
    width: 100%;
    /*height: 100%;*/
    height: 284px;
    /*background: rgba(43, 54, 72, 0.95);*/
    position: relative;
    /*padding: 13px;*/
    padding-top: 4px;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  .quality-content .title {
    position: relative;
    top: 8px;
    left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
  }

  .quality-content .select {
    width: 100px;
    position: absolute;
    top: 4%;
    left: 53%;
    right: 10%;
  }

  .form-control {
    width: 100px;
    height: 30px;
    text-indent: 10px;
    background: rgba(0, 0, 0, 0.20);
    border-radius: 4px;
    border: none;
    font-size: 12px;
    color: #9FACC3;
  }

  #main-quality {
    width: 100%;
  }

  .quality-legend {
    width: 100%;
    left: 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .quality-legend i {
    font-style: normal;
    /*width: 100px;*/
    color: #9FACC3;
    font-size: 12px;
  }

  .quality-legend b {
    float: right;
    font-size: 14px;
    color: #50E3C2;
    font-weight: normal;
  }

  .quality-legend span {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 8px;
    height: 8px;
    display: inline-block;
    /*float: left;*/
    margin-right: 3px;
  }

  .quality-legend div {
    width: 50%;
    line-height: 20px;
    color: #fff;
    box-sizing: border-box;
    &:nth-child(2n+1) {
      padding-right: 10px;
    }
  }
</style>
